<template>
  <div class="data-form">
    <el-form :model="datas" :rules="rules" ref="formSave">
      <el-row>
        <el-col :span="7">
          <el-form-item label="分类" prop="category_id">
            <el-select v-model="datas.category_id" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.category_id"
                :label="item.category_name"
                :value="item.category_id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-form-item label="图书文件" prop="path">
            <el-input placeholder="图书文件" v-model="datas.path" class="input-with-select">
              <el-button
                class="choose"
                @click="file"
                slot="append"
                icon="el-icon-picture-outline "
              >选择文件</el-button>
            </el-input>
            <el-upload
              ref="fileUpload"
              :headers="header"
              class="upload-demo"
              action="/admin/literature/uploadBooks"
              :on-success="handleChange1"
              :limit="1"
              :file-list="fileList1"
            ></el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="1">
          <el-form-item label="图书封面" prop="cover">
            <el-input placeholder="图片文件" v-model="datas.cover" class="input-with-select">
              <el-button
                class="choose"
                @click="fileImg"
                slot="append"
                icon="el-icon-picture-outline "
              >选择图片</el-button>
            </el-input>
            <el-upload
              ref="fileUpimg"
              :headers="header"
              class="upload-demo"
              action="/admin/literature/uploadCover"
              :on-success="handleChange2"
              :limit="1"
              :file-list="fileList2"
            ></el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="图书名" prop="title">
            <el-input placeholder="图书名" v-model="datas.title" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="作者" prop="author">
            <el-input placeholder="作者" v-model="datas.author" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="出版社" prop="publisher">
            <el-input placeholder="出版社" v-model="datas.publisher" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-form-item label="ISBN" prop="isbn">
            <el-input placeholder="ISBN" v-model="datas.isbn" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="1">
          <el-form-item label="页数" prop="pages">
            <el-input placeholder="0" v-model="datas.pages" class="input-with-select"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推荐资源">
            <template>
              <el-radio-group v-model="datas.recommended">
                <el-radio :label="0">不推荐</el-radio>
                <el-radio :label="1">推荐</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="开放资源">
            <template>
              <el-radio-group v-model="datas.open_resources">
                <el-radio :label="0"> 不开放</el-radio>
                <el-radio :label="1">开放</el-radio>

              </el-radio-group>
            </template>
          </el-form-item>
     
        </el-col>
        <el-col :span="6" :offset="1">
          <el-form-item label="资源大小(KB)">
            <el-input v-model="datas.filesize" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="图文说明" prop="description">
            <el-input
              class="text"
              type="textarea"
              :row="4"
              :autosize="{ minRows: 2, maxRows: 5}"
               maxlength="1000"
                show-word-limit
              placeholder="请输入内容"
              v-model="datas.description"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import store from "../../store";
let access = store.state.user.accessToken,
  refresh = store.state.user.refreshToken;
export default {
  name: "Compile",
  props: {
    title: String,
    option: Array,
    formData: Object,
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      header: {
        accessToken: access,
        refreshToken: refresh,
      },
      datas: this.formData,
      fileList1: [],
      fileList2: [],
      form: {
        name: "",
        region: "",
        category_id: null,
        path: "",
        cover: "",
      },
      rules: {
        category_id: [
          { required: true, message: "请选择一个分类", trigger: "change" },
        ],
        title: [{ required: true, message: "请填写图书名称", trigger: "blur" }],
        cover: [{ required: true, message: "请上传图片", trigger: "blur" }],
        path: [{ required: true, message: "请上传文件", trigger: "blur" }],
        author: [{ required: true, message: "请填写作者", trigger: "blur" }],
        publisher: [
          { required: true, message: "请填写出版社", trigger: "blur" },
        ],
        pages: [{ required: true, message: "请填写页面数", trigger: "blur" }],
        isbn: [{ required: true, message: "请填写isbn", trigger: "blur" }],
      },
      dialogFormVisible: false,
    };
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        this.datas = val;
      },
    },
  },
  methods: {
    handleChange1(file) {
      let length = this.fileList1.length;
      if (length != 0) {
        this.$message({
          type: "info",
          message: "请删除上传的文件列表",
        });
      } else {
        if (file.code == 2) {
          this.$message({
            type: "info",
            message: file.msg,
          });
          this.fileList1 = [];
        } else {
          this.$message({
            type: "success",
            message: file.message,
          });
          this
          console.log(file.data.path);
          this.$set(this.datas, "path", file.data.path);
          this.$set(this.datas, "filesize", file.data.size);
        }
      }
    },
    handleChange2(file) {
      let length = this.fileList1.length;
      if (length != 0) {
        this.$message({
          type: "info",
          message: "请删除上传的文件列表",
        });
      } else {
        if (file.code == 2) {
          this.$message({
            type: "info",
            message: file.msg,
          });
          this.fileList2 = [];
        } else {
          this.$message({
            type: "success",
            message: file.message,
          });
          this.$set(this.datas, "cover", file.data.path);
        }
      }
    },
    handleClick() {},
    file() {
      this.$refs.fileUpload.$refs["upload-inner"].handleClick();
    },
    fileImg() {
      this.$refs.fileUpimg.$refs["upload-inner"].handleClick();
    },
    validataForm() {
      this.$refs["formSave"].validate((valid) => {
        if (valid) {
          if (this.title == "添加图书信息") {
            this.$emit("saveData");
            console.log(1);
          } else {
            this.$emit("saveDataEditor");
            console.log(2);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.el-form-item__label {
  line-height: 30px;
  padding: 0;
}
label {
  float: none !important;
}
.el-upload {
  display: block;
}
</style>
<style  scoped>
.label-title {
  padding-bottom: 10px;
}
.choose {
  background-color: #5cb85c;
}
.el-select {
  width: 100%;
}
.text {
  height: 100px;
}
.el-textarea .el-input__count{
  bottom: auto;
}
</style>
